<template>

	<view class="task-page">

		<!-- 顶部tab -->
		<scroll-view class="tab-bar" scroll-x="true" show-scrollbar="false">
			<view class="tab-bar-inner">
				<view
					v-for="(tab, idx) in tabs"
					:key="tab.key"
					:class="['tab-item', currentTab === tab.key ? 'active' : '']"
					@click="currentTab = tab.key"
				>
					{{ tab.label }}
				</view>
			</view>
		</scroll-view>

		<!-- 筛选区 -->
		<view class="filter-box">
			<view class="filter-row">
				<text class="filter-label">开始时间</text>
				<view class="picker-wrapper">
					<picker mode="date" :value="startTime" @change="onStartTimeChange">
						<view class="picker-value">{{ startTime || '请选择开始时间' }}</view>
					</picker>
<!--					<image class="filter-icon" src="/static/calendar.png" mode="aspectFit" />-->
				</view>
			</view>
			<view class="filter-row">
				<text class="filter-label">截止时间</text>
				<view class="picker-wrapper">
					<picker mode="date" :value="endTime" @change="onEndTimeChange">
						<view class="picker-value">{{ endTime || '请选择截止时间' }}</view>
					</picker>
<!--					<image class="filter-icon" src="/static/calendar.png" mode="aspectFit" />-->
				</view>
			</view>

		</view>

		<!-- 表格区 -->
		<view class="table-box">
			<view class="table-row">
				<text class="table-label">任务名称</text>
				<input class="table-input" v-model="taskName" placeholder="请输入任务名称" />
			</view>
			<view class="table-row">
				<text class="table-label">提交内容</text>
				<input class="table-input" v-model="submitContent" placeholder="请输入提交内容" />
			</view>

		</view>

		<view class="action-row">
			<button class="action-btn" size="mini" @click="searchList">搜索</button>
			<button class="action-btn gray" size="mini" @click="clearSearch">清空搜索</button>
		</view>

		<!-- 任务列表 -->
		<view class="task-list" v-if="taskList.length > 0">
			<view class="margin-top-05" v-for="(item, index) in taskList" :key="index">
			    <view class="while-task mui-border-1-bottom">
			        <view class="mui-row">
			            <view class="mui-col-xs-2">
							<image :src="item.cover" class="employer-avatar"></image>
			            </view>
			            <view class="mui-col-xs-10">
			                <text class="pull-right check-task-state" :style="{ background: statusMap[item.status]?.color }">{{ statusMap[item.status]?.text }}</text>
			                <view class="publish padding-lr-10">
								任务名称： <text class="publisher">{{ item.task_name }}</text>
			                </view>
			                <view class="publish padding-lr-10">
								任务奖励： <text class="publisher txt-red">{{ item.price }}元</text>
			                </view>
			                <view class="publish padding-lr-10">
								提交内容： <text class="publisher">{{ item.task_data }}</text>
			                </view>
			                <view v-if="item.audit_time" class="publish padding-lr-10">
								审核时间： <text class="publisher txt-red">{{ item.audit_time }}</text>
			                </view>
			                <view v-if="item.notes" class="publish padding-lr-10" style="height:100%;word-break: break-all;">
								拒绝原因： <text class="publisher txt-red">{{ item.notes }}</text>
			                </view>
			            </view>
			        </view>
			    </view>
			</view>

			<!-- <view class="task-item" v-for="(item, index) in taskList" :key="index">
				<view class="item-img">
					<image :src="item.cover"></image>
				</view>
				<view class="item-content">
					<view class="task-content">
						<view class="task-info">
							<text class="task-label">任务奖励：</text>
							<text class="task-value">¥{{ item.price }}</text>
						</view>
						<view class="task-info">
							<text class="task-label">提交内容：</text>
							<text class="task-value">{{ item.task_data }}</text>
						</view>
						<view v-if="item.status!=0" class="task-info">
							<text class="task-label">审核时间：</text>
							<text class="task-value">{{ item.audit_time }}</text>
						</view>

						<view v-if="item.status==-1" class="task-info">
							<text class="task-label">拒绝原因：</text>
							<text class="task-value">{{ item.notes }}</text>
						</view>
						<view class="task-info">
							<text class="task-label">提交时间：</text>
							<text class="task-value">{{ item.created_at }}</text>
						</view>
					</view>
				</view>
				<view class="task-header">
					<text class="task-name">{{ item.task_name }}</text>
					<text class="task-status" :style="{ color: statusMap[item.status]?.color }">
						{{ statusMap[item.status]?.text }}
					</text>
				</view>
			</view> -->
		</view>

		<!-- 空态 -->
		<view class="empty-box" v-else>
			<image class="empty-img" src="/static/mescroll-empty.png" mode="aspectFit" />
			<text class="empty-text">暂无数据</text>
		</view>
	</view>

	<view v-if="loading" class="loading-text">{{noMore}}</view>
</template>

<script setup>
import { ref,reactive, onMounted, watch } from 'vue'
import { getMemberTaskOrder,getTaskOrderStatus } from "@/api/task.js"
import { onReachBottom,onPullDownRefresh } from "@dcloudio/uni-app"
const tabs = ref([
	{ key: '-3', label: '全部' }
])
const currentTab = ref('-3')
const taskName = ref('')
const submitContent = ref('')

const statusIndex = ref("-3")
const startTime = ref('')
const endTime = ref('')

// 添加新的响应式变量
const taskList = ref([])
const loading = ref(false)
const page = ref(1);
const pageSize = ref(10);
const lastPage = ref(1);
const noMore = ref("加载中...");      // 是否无更多数据
// 状态映射
const statusMap = {
	'-1': { text: '拒绝', color: '#ff4d4f' },
	'0': { text: '待审核', color: '#faad14' },
	'1': { text: '审核通过', color: '#52c41a' },
	'2': { text: '已撤销', color: '#999999' }
}

function goBack() {
	uni.navigateBack();
}
// Removed unused function 'onStatusChange'
function onStartTimeChange(e) {
	startTime.value = e.detail.value
}
function onEndTimeChange(e) {
	endTime.value = e.detail.value
}

const getStatusList = async () => {
	const res = await getTaskOrderStatus()
	// 假设 res 是对象，如 {0: '待审核', 1: '审核通过', 2: '已撤销'}
	const arr = Object.entries(res).map(([key, label]) => ({ key, label }))
	tabs.value = [{ key: '-3', label: '全部' }, ...arr]
}
// 获取任务列表
async function getTaskList() {
	uni.showLoading({
		title: '加载中'
	});
	try {
		loading.value = true
		const params = {
			page:page.value,
			pageSize:pageSize.value,
			title:taskName.value,
			startTime: startTime.value,
			endTime: endTime.value,
			task_data:submitContent.value,
			status:statusIndex.value
		}
		const res = await getMemberTaskOrder(params);
		console.log('任务列表:', res)
		if (page.value === 1) {
			// 第一页直接赋值
			taskList.value = res.data;
		} else {
			// 追加数据
			taskList.value = [...taskList.value, ...res.data];
		}

		page.value = res.current_page;
		lastPage.value = res.last_page;
	} catch (e) {
		console.error(e)
	} finally {
		loading.value = false
		uni.hideLoading();
    uni.stopPullDownRefresh();
	}
}

// 监听tab切换
watch(currentTab, (idx) => {
	statusIndex.value = idx;
	page.value = 1;
	getTaskList()
})

// 清空搜索
function clearSearch() {
	startTime.value = ''
	endTime.value = ''
	taskName.value = ''
	submitContent.value = ''
	getTaskList()
}

const searchList = () => {
	page.value = 1;
	getTaskList()
}

onMounted(() => {
	getStatusList()
	getTaskList()
})

onReachBottom(()=>{
	loading.value=true;
	if(lastPage.value<=page.value){
			noMore.value="没有更多了";
			// 3秒后重置noMore状态
			setTimeout(() => {
				loading.value = false;
			}, 3000);
	}else{
		noMore.value="加载中...";
		page.value+=1;
		getTaskList();
	}
});

onPullDownRefresh(()=>{
	loading.value=false;
	noMore.value = false;
	page.value=1;
	taskName.value='';
	startTime.value='';
	endTime.value='';
	submitContent.value='';
	statusIndex.value=-3;
	getTaskList();
});
</script>

<style lang="scss" scoped>
.task-page {
	min-height: 100vh;
	background: #f6f7fb;
	display: flex;
	flex-direction: column;
}
.tab-bar {
	width: 100vw;
	background: #fff;
	border-bottom: 2rpx solid #f0f0f0;
	/* 保证横向滚动 */
	white-space: nowrap;
}
.tab-bar-inner {
	display: flex;
	flex-direction: row;
	width: max-content;
}
.tab-item {
	flex-shrink: 0;
	white-space: nowrap;
	padding: 0 36rpx;
	height: 72rpx;
	line-height: 72rpx;
	font-size: 26rpx;
	color: #666;
	border-bottom: 4rpx solid transparent;
	transition: all 0.2s;
}
.tab-item.active {
	color: #1976d2;
	border-bottom: 4rpx solid #1976d2;
	font-weight: bold;
}
.filter-box {
	background: #fff;
	padding: 0 24rpx 12rpx 24rpx;
}
.filter-row {
	display: flex;
	align-items: center;
	margin: 12rpx 0;
}
.filter-label {
	width: 120rpx;
	font-size: 24rpx;
	color: #222;
}
.filter-input {
	flex: 1;
	height: 48rpx;
	border: none;
	background: transparent;
	font-size: 24rpx;
	color: #333;
	margin-right: 12rpx;
	border-bottom: 2rpx solid #f0f0f0;
}
.filter-icon {
	width: 32rpx;
	height: 32rpx;
}
.filter-select {
	flex: 1;
	height: 48rpx;
	font-size: 24rpx;
	color: #333;
	border: none;
	background: transparent;
	border-bottom: 2rpx solid #f0f0f0;
}
.table-box {
	background: #fff;
	margin: 0 0 12rpx 0;
	padding: 0 24rpx;
	border-bottom: 2rpx solid #f0f0f0;
}
.table-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60rpx;
	border-bottom: 2rpx solid #f0f0f0;
}
.table-row:last-child {
	border-bottom: none;
}
.table-label {
	font-size: 24rpx;
	color: #222;
}
.table-value {
	font-size: 24rpx;
	color: #888;
}
.table-btn {
	width: 100%;
	background: #f2f2f2;
	color: #1976d2;
	font-size: 26rpx;
	border-radius: 8rpx;
	border: none;
	padding: 12rpx 0;
	margin: 12rpx 0;
}
.action-row {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 18rpx 0;
	gap: 24rpx;
}
.action-btn {
	flex: 1;
	background: #1976d2;
	color: #fff;
	font-size: 26rpx;
	border-radius: 8rpx;
	border: none;
	padding: 18rpx 0;
	margin: 0 12rpx;
}
.action-btn.gray {
	background: #f2f2f2;
	color: #222;
}
.empty-box {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 40rpx;
}
.empty-img {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 18rpx;
}
.empty-text {
	font-size: 26rpx;
	color: #888;
}
.table-input {
	flex: 1;
	height: 48rpx;
	font-size: 24rpx;
	color: #333;
	border: none;
	background: transparent;
	border-bottom: 2rpx solid #f0f0f0;
	text-align: right;
	padding: 0 8rpx;
}
.back-icon image{
	width: 40rpx;
	height: 40rpx;
}
.picker-wrapper {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2rpx solid #f0f0f0;
	margin-right: 12rpx;
}
.picker-value {
	flex: 1;
	height: 48rpx;
	line-height: 48rpx;
	font-size: 24rpx;
	color: #333;
}
.task-list {
	// background: #ccc;
	// margin: 12rpx 0;
	// padding: 0 24rpx;
}
.task-item {
	padding: 24rpx 0;
	border-bottom: 2rpx solid #f0f0f0;
}
.task-item:last-child {
	border-bottom: none;
}
.task-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
}
.task-name {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}
.task-status {
	font-size: 24rpx;
}
.task-content {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}
.task-info {
	display: flex;
	align-items: center;
}
.task-label {
	font-size: 24rpx;
	color: #666;
	min-width: 140rpx;
}
.task-value {
	font-size: 24rpx;
	color: #333;
	flex: 1;
}
.loading-text, .no-more-text {
    text-align: center;
    padding: 20rpx;
    color: #999;
	background: #f6f7fb;;
}
.action-row button{
	height: 60rpx;
	line-height: 30rpx;
	font-size: 30rpx;

}
.margin-top-05 {
    margin-top: 10rpx;
}
.while-task {
    padding: .3rem 0.5rem;
    background: #FFF;
    color: #333;
    text-align: left;
}
.mui-border-1-bottom {
    position: relative;
}

.mui-col-xs-2 {
    width: 16.66666667%;
}
.employer-avatar {
    width: 3.3rem;
    height: 3.3rem;
    border-radius: 50%;
	vertical-align: middle;
	display: inline-block;
}
.mui-row:before, .mui-row:after {
    display: table;
    content: ' ';
}
.mui-row:after {
    clear: both;
}
.mui-row:before, .mui-row:after {
    display: table;
    content: ' ';
}
.mui-border-1-bottom:after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    border-bottom: 1px solid #e5e5e5;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    z-index: 2;
}
.mui-col-xs-10 {
    width: 83.33333333%;
	line-height: 21px;
	float: left;
}
.mui-col-xs-2 {
    width: 16.66666667%;
}
.check-task-state {
    position: relative;
    top: -0.3rem;
    right: -0.5rem;
    font-size: 13px;
    color: #fff;

    padding: 1px 3px;
}
.while-task .publish {
    /* height: 1rem; */
    margin-top: .8rem auto 2rem auto;
    color: #999;
    font-size: .6rem;
}

.padding-lr-10{
    padding-left: 10px;
    padding-right: 10px
}
.padding-lr-1rem{
    padding-left: 1rem;
    padding-right: 1rem
}
.while-task .publish .publisher {
    text-align: left;
    color: #09F;
}
.txt-red {
    color: #F00 !important;
}
.while-task .publish .publisher {
    text-align: left;
    color: #09F;
}
.check-task-state-nopass {
    position: relative;
    top: -0.3rem;
    right: -0.5rem;
    font-size: 13px;
    color: #fff;
    background-color: #e54d42;
    padding: 1px 3px;
}
.pull-right {
    float: right;
}
.mui-row > .mui-col-xs-2
{
    float: left;
}

</style>
